/*
  文档布局组件, 入口
*/
<template>
  <el-container class="container-level__one">
    <el-header height="48px">
      <page-header :isLeftCollapse.sync="collapseLeft" :is-right-collapse.sync="collapseRight"></page-header>
    </el-header>
    <el-container class="container-level__two">
      <el-aside width="230px" class="left-side" :class="{ collapse: collapseLeft }">
				<left-side :is-collapsed="collapseLeft"></left-side>
			</el-aside>
			<el-aside class="right-side" :class="{ collapse: collapseRight }">
			</el-aside>
      <el-container class="container-level__three">
				<el-header height="55px">
					<tab-bar></tab-bar>
				</el-header>
        <el-main>
					<!--<router-view></router-view>-->
					<keep-alive>
						<!--<component :is="currentTab"></component>-->
						<router-view></router-view>
					</keep-alive>
				</el-main>
        <el-footer>
					<page-footer></page-footer>
				</el-footer>
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
import PageHeader from '../components/content/PageHeader.vue'
import PageFooter from "@/components/content/Footer";
import LeftSide from "@/components/content/LeftSide";
import TabBar from "@/components/common/TabBar";

export default {
  name: "Main",
  data() {
    return {
			collapseLeft: false,	//左侧菜单是否折叠
			collapseRight: true,
			currentTab: ""
    }
  },
	computed: {
	},
  components: {LeftSide, PageFooter, PageHeader, TabBar },
	created() {
		console.log("main created")
	}
}
</script>

<style lang="scss">
  .container-level__one {
    height: 100%;
    background-color: #e9eef3;

    .el-header {
      position: relative;
      padding: 0;
    }

    .container-level__two {
      overflow: hidden;
			position: relative;

			.left-side {
				transition: width .5s;
			}

			.left-side.collapse {
				width: 65px!important;
			}

			.right-side {
				width: 230px;
				background-color: #304156;
				position: absolute;
				right: 0;
				height: 100%;
				transition: width .5s;
				z-index: 1000;
			}

			.right-side.collapse {
				width: 0!important;
			}

			.container-level__three {

			}
    }
  }
</style>
